<template>
	<view class="content">
		<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
			:duration="duration">
			<swiper-item v-for="(item,index) in datalist" :key="item.id" v-if="index<6" @click="handleItemClick(item.id)">
				<image :src="item.img_md" mode="center" style="width: 100%;"></image>
			</swiper-item>
		</swiper>

		<type-bar />

		<goods-list :list="datalist" @click="handleItemClick" style="margin-top: 20rpx;" />
		<uni-load-more :status="status"></uni-load-more>
		<bottom-nav :checkedIndex="0"></bottom-nav>
	</view>
</template>

<script>
	const LOAD_MORE_STATUS = {
		more: "more",
		loading: "loading",
		noMore: 'no-more'
	}
	import model from '../goods/model.js'
	export default {
		data() {
			return {
				datalist: [],
				status: LOAD_MORE_STATUS.more,
				searchKey: "",
				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500
			}
		},
		mixins: [model],
		onLoad(option) {

			this.searchKey = option?.key
			console.log(this.searchKey, "搜索关键词");
			this.param = {
				...this.param,
				keyword: option?.key,
				cate_1st: option?.cate_1st,
				cate_2nd: option?.cate_2nd,
				pageIndex: 1
			}
			this.getList()
		},
		onPullDownRefresh() {
			this.param.pageIndex = 1
			this.getList()
		},
		methods: {
			handleItemClick(id) {
				// #ifdef H5
				const {
					aplus_queue
				} = window;
				aplus_queue.push({
					action: 'aplus.record',
					arguments: [{
						is_auto: false
					}, {
						param1: 111,
						param2: '222',
						click: "商品详情" + id
					}]
				});
				console.log([{
					is_auto: false
				}, {
					param1: 111,
					param2: '222',
					click: "商品详情" + id
				}], "点击事件")
				// #endif
				uni.navigateTo({
					url: `/pages/goods/detail/detail?id=${id}`
				})
			},
			async getList() {
				this.status = LOAD_MORE_STATUS.loading
				const {
					goods: newList
				} = await this.getData()
				const {
					datalist: oldList
				} = this
				if (this.param.pageIndex === 1) this.datalist = newList
				else this.datalist = [...oldList, ...newList]
				if (newList.length < 10) this.status = LOAD_MORE_STATUS.noMore
				else this.status = LOAD_MORE_STATUS.more
				uni.stopPullDownRefresh();
			}
		},
		onReachBottom() {
			this.param.pageIndex++
			this.getList()
		}
	}
</script>

<style lang="scss">
.swiper{
	margin: 0;
	padding: 0;
}
</style>
